/****************
 *@description:  拼团活动列表    spellTogether/index.jsx
 *@author: Xhd
 *@date: 2023-09-07 09:51:34
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from "react";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import store from "@/store/store";
import { apiGetSpellTogetherPage, apiGetSpellTogetherEnd } from "@/request/spellTogether";

class SpellTogether extends Component {
  constructor() {
    super()
    this.queryFormRef = React.createRef()
    this.state = {
      form_show: true,
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      queryForm: {},
      NewColumns: [],
      searchOption: [
        { field: 'query', label: '拼团活动', placeholder: '请输入活动id/名称', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'status', label: '状态', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ label: "全部状态", value: "" }, { label: "未开始", value: "未开始" }, { label: "进行中", value: "进行中" }, { label: "已结束", value: "已结束" }], defaultValue: "" },
      ],
      columns: [
        {
          title: "活动id",
          dataIndex: "activityId",
          key: "activityId",
        },
        {
          title: "活动名称",
          dataIndex: "activityName",
          key: "activityName",
        },
        {
          title: "活动时间",
          dataIndex: "activityTime",
          key: "activityTime",
          render: (text, render) =>{
            return (render.startTime + "~" + render.realityEndTime)
          }
        },
        {
          title: "状态",
          dataIndex: "activityStatusEnum",
          key: "activityStatusEnum",
        },
        {
          title: "最近修改时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "操作",
          dataIndex: "serviceShowFile",
          key: "serviceShowFile",
          render: (text, render) => {
            return <div>
              <TheButton haspermi={['spell:list:detail']} onClick={() => this.views(render.activityId, "view")}>查看</TheButton>
              {render.activityStatusEnum !== "已结束" && <TheButton haspermi={['spell:list:edit']} onClick={() => this.views(render.activityId, "edit")} >修改</TheButton>}
              {render.activityStatusEnum !== "已结束" && <TheButton haspermi={['spell:list:stop']} onClick={() => this.toEnd(render.activityId)} >提前结束</TheButton>}
              {render.activityStatusEnum !== "未开始" && <TheButton haspermi={['spell:list:data']} onClick={() => this.figures(render.activityId)} >数据</TheButton>}
            </div>
          }
        },
      ]
    }
  }

  componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'spellTogether') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo,
          pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({ ...queryForm })
        this.getData()
      })
    } else {
      this.getData()
    }
  }

  async getData(values) {
    let { pageNo, pageSize } = this.state.pageData
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      const params = {
        pageNo, pageSize, queryForm: this.state.queryForm
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: "spellTogether",
          ...params
        }
      })
      let res = await apiGetSpellTogetherPage({
        pageNo, pageSize, ...this.state.queryForm
      })
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount,
        })
      }
    })
  }

  onColumnsFilter = (value) => {
    this.setState({
      NewColumns: value
    })
  }

  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }

  onReset() {
    this.setState({
      queryForm: {},
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
    }, () => {
      this.getData()
    })
  }

  onTableRefresh() {
    this.getData()
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };

  views(activityId, type) {
    this.props.history.push(`/spellTogether/edit/${activityId}/${type}`)
  }
  
  toEnd = (activityId) => {
    React.$confirm({
      title: "提示",
      content: `提前关闭拼团活动可能导致正在购买的消费者无法正常下单，是否继续关闭？`,
      onOk: async () => {
        let res = await apiGetSpellTogetherEnd({activityId})
        if(res.code === 0) {
          React.$message({
            type: "info",
            content: "提前结束成功",
          })
          this.getData()
        }
      }
    }) 
  }

  figures(activityId) {
    this.props.history.push(`/spellTogether/dashboards/${activityId}`)
  }

  render() {
    const { form_show, searchOption, columns, NewColumns, dataSource, pageData, total } = this.state
    return (<div className="p-layout-box commodity-examine">
      <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption} onGetValues={(values) => this.onFormSearch(values)} onReset={() => { this.onReset() }}></TheQueryForm>

      <TheTableExtend
        columns={columns}
        onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
        onTableRefresh={() => this.onTableRefresh()}
        onColumnsFilter={(value) => { this.onColumnsFilter(value) }}
      >
        <TheButton haspermi={['spell:List:create']} size="middle" onClick={() => this.props.history.push('/spellTogether/add')} type="primary">新建拼团活动</TheButton>
      </TheTableExtend>

      <TheTable
        scroll={{ x: "max-content", y: '63vh' }}
        columns={NewColumns}
        dataSource={dataSource}
      />

      <ThePagination
        pageNo={pageData.pageNo}
        pageSize={pageData.pageSize}
        total={total}
        pageChange={this.pageChange}
      />
    </div>)
  }
}

export default SpellTogether
